<script setup>
import LevelA from './LevelA.vue'
import { reactive, computed, provide, inject } from 'vue'

const rgb = reactive({
  r: 0,
  g: 0,
  b: 0
})

const rgbStr = computed(() => {
  return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
})

// 使用 provide 函数，向下（向后代组件）中注入数据
provide('rgbColor', rgbStr)

const message = inject('message')
</script>

<template>
  <h1>Index 组件</h1>
  <p>{{ rgbStr }}</p>
  <p>{{ message }}</p>
  <p>R:</p>
  <input type="number" v-model="rgb.r" />
  <p>G:</p>
  <input type="number" v-model="rgb.g" />
  <p>B:</p>
  <input type="number" v-model="rgb.b" />

  <hr />

  <LevelA />
</template>

<style scoped></style>
